<template>
  <div
    class="login_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <div class="login_box">
      <!-- <div class="login_box_left">
        <div class="login_box_left_words">
          扫一扫关注 上海市篮球协会 官方微信
        </div>
        <div class="login_box_left_qrcode_box">
          <img
            class="login_box_left_qrcode_img"
            src="../../assets/image/login_qrCode01.jpg"
          />
        </div>
        <div class="login_box_left_words">更多篮球资讯</div>
        <div class="login_box_left_words">请关注官方微信公众号</div>
      </div> -->
      <div class="login_box_right">
        <div class="login_box_right_title">用户登录</div>
        <div class="login_box_right_form">
          <el-form ref="loginForm" :model="loginData" :rules="rules">
            <!-- <el-form-item prop="username">
              <div class="login_box_right_form_item">
                <div class="login_box_right_form_item_name">用户名：</div>
                <el-input
                  v-model="loginData.username"
                  style="width: 370px"
                ></el-input>
              </div>
            </el-form-item> -->
            <!-- <el-form-item prop="password">
              <div class="login_box_right_form_item">
                <div class="login_box_right_form_item_name">密码：</div>
                <el-input
                  type="password"
                  v-model="loginData.password"
                  style="width: 370px"
                ></el-input>
              </div>
            </el-form-item> -->
            <el-form-item prop="tel">
              <div class="login_box_right_form_item">
                <div class="login_box_right_form_item_name">手机号：</div>
                <el-input
                  v-model="loginData.tel"
                  style="width: 360px"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item prop="code">
              <div class="login_box_right_form_item">
                <div class="login_box_right_form_item_name">验证码：</div>
                <div class="code_box">
                  <el-input
                    v-model="loginData.code"
                    style="width: 250px; margin-right: 10px"
                  ></el-input>
                  <el-button @click="getCodeFn()" :disabled="!getCodeKey">{{
                    getCodeTime
                  }}</el-button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="danger" style="width: 440px" @click="loginBtn()"
          >立即登录</el-button
        >
      </div>
    </div>
  </div>
</template>
<style src="../../assets/css/home/login.css" scoped></style>

<script>
export default {
  name: "Login",
  components: {},
  data() {
    return {
      loginData: {
        // username: "",
        // password: "",
        tel: "",
        code: "",
      },
      rules: {
        // username: [
        //   { required: true, message: "请输入用户名", trigger: "blur" },
        // ],
        // password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        tel: [{ validator: this.validatetel, trigger: "change" }],
        code: [{ validator: this.validatecode, trigger: "change" }],
      },
      getCodeTime: "获取验证码",
      codeInterval: null,
      getCodeKey: true, // 获取验证码控制
      loadingKey: false,
      loadingText: "",
    };
  },
  created: function () {},
  methods: {
    // 登录
    loginBtn: function () {
      let that = this;
      let url = "/admin/adminusers/login";
      let data = {
        // username: this.loginData.username,
        // password: this.loginData.password,
        phone: this.loginData.tel,
        phone_code: this.loginData.code,
      };
      this.$refs.loginForm.validate((valid) => {
        if (!valid) {
          return false;
        } else {
          this.loadingText = "登陆中...";
          that.loadingKey = true;
          this.axios
            .post(url, data)
            .then((response) => {
              that.loadingKey = false;
              if (response.code == 0) {
                that.$store.commit("set_loginToken", response.token);
                that.$store.commit("set_loginUserId", response.userid);
                that.$router.replace({
                  name: "Home",
                });
              } else {
                that.$message.error(response.msg);
              }
            })
            .catch(function (error) {
              that.loadingKey = false;
              console.log(error);
            });
        }
      });
    },
    // 获取验证码
    getCodeFn: function () {
      let that = this;
      this.$refs.loginForm.validateField("tel", function (valid) {
        if (valid == "") {
          if (that.getCodeKey) {
            that
              .$confirm("确认发送短信验证码?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
              })
              .then(() => {
                let url = "/admin/adminusers/getPhoneCode";
                let data = {
                  phone: that.loginData.tel,
                };
                that.getCodeKey = false;
                that.setCodeTimeFn();
                that.axios
                  .post(url, data)
                  .then((response) => {
                    if (response.code != 0) {
                      that.getCodeKey = true;
                      clearInterval(that.codeInterval);
                      that.getCodeTime == "获取验证码";
                      that.$message.error(response.msg);
                    }
                  })
                  .catch(function (error) {
                    that.getCodeKey = true;
                    that.getCodeTime = "获取验证码";
                    clearInterval(that.codeInterval);
                    console.log(error);
                  });
              });
          }
        }
      });
    },
    // 设置重新获取验证码时间
    setCodeTimeFn: function () {
      let that = this;
      let time = 30;
      this.codeInterval = setInterval(function () {
        if (time > 0) {
          that.getCodeTime = "重新发送(" + time + ")";
          time = time - 1;
        } else {
          that.getCodeTime = "获取验证码";
          that.getCodeKey = true;
          clearInterval(that.codeInterval);
        }
      }, 1000);
    },
    // 校验手机号输入
    validatetel: function (rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        let telText =
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/;
        if (!telText.test(value)) {
          callback(new Error("手机号格式不正确"));
        } else {
          callback();
        }
      }
    },
    // 校验验证码输入
    validatecode: function (rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    },
  },
};
</script>
